import React from 'react'
import CustomButton from "../../../../../shared-components/CustomButton/CustomBotton"
import './SteamerCoinsAndCheckIn.css'

const SteamerCoinsAndCheckIn = props => {

    const {
        checkinInfo: {
            signtoday,
            seq,
        },
        checkIn,
        history,
        Gold,
    } = props

    const checkInBtnXs = (signtoday ?
        <CustomButton
            inline='true'
            size='xs'
            bg='#E8E8E8'
            color='#333'
            // onClick={checkIn}
        >
            <span style={{opacity: '0.5'}}>已签到</span>
        </CustomButton>
        : <CustomButton
            inline='true'
            size='xs'
            onClick={checkIn}
            shadow='0px 2px 4px 0px rgba(250,114,104,0.4)'
        >签到</CustomButton>
    )

    const steamerWithDraw = (
        <div className='my-checkin-and-coin-steamer-withdraw-container'>
            <p className='my-checkin-and-coin-steamer-big-text'>{Gold}</p>
            <p className='my-checkin-and-coin-steamer-small-text'>金币</p>
            <CustomButton
                inline='true'
                size='xs'
                onClick={(e) => history.push('withdraw')}
                shadow='0px 2px 4px 0px rgba(250,114,104,0.4)'
            >提现</CustomButton>
        </div>
    )

    const steamerCheckIn = (
        <div className='my-checkin-and-coin-steamer-checkin-container'>
            <p className='my-checkin-and-coin-steamer-big-text'>{seq}</p>
            <p className='my-checkin-and-coin-steamer-small-text'>天</p>
            {checkInBtnXs}
        </div>
    )

    return (
        <div className='my-checkin-and-coin-steamer-container'>
            <div className='my-checkin-and-coin-steamer-sub-container'>
                {steamerWithDraw}
            </div>
            <div className='my-checkin-and-coin-steamer-sub-container'>
                {steamerCheckIn}
            </div>
        </div>
    )
}

export default SteamerCoinsAndCheckIn
